
<template>
    <div>
        <div class="panel panel-default panel-search">
            <el-form :inline="true">

                <el-form-item label="周期" prop="periodId">
                    <period-select :fnChange="search" ref='periodSelect' v-model="page.query.param.periodId"
                                   :clearable="true"></period-select>

                </el-form-item>

                <el-form-item label="日期 ">
                    <!--<product-type-select v-model="page.query.param.day" :clearable="true"></product-type-select>-->
                    <el-date-picker style="width:270px" v-model="dateRange" type="daterange"
                                    start-placeholder="开始" end-placeholder="结束" range-separator="至"
                                    format="yyyy年MM月dd日"  value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>

                </el-form-item>
                <el-form-item label="类型">
                    <el-select :clearable="true" v-model="page.query.param.type" style="width:100px">
                        <el-option v-for="item in $dongxwDict.store.DAY_TYPES" :key="item[0]" :value="item[0]"
                                   :label="item[1]"></el-option>
                    </el-select>
                </el-form-item>

                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="cancel">取消</el-button>

                <!--<el-button plain @click="exportRecords">导出 XLS</el-button>-->
                <el-button type="primary" plain @click="create">新增</el-button>


            </el-form>
        </div>
        <v-toolbar title="节假日清单 ( 节假日必须配置，工作日只须配置周六周日，周一至周五除节日外默认工作日！) " style="color: rebeccapurple" type="alert">


        </v-toolbar>


        <v-table ref='table' :dblclick='edit' :page='page' :table-minheight='450' @dataloaded='onDataloaded'>
            <el-table-column  prop="seq" label="序号" width="50">
                <template slot-scope="scope"><span >{{scope.$index + 1}} </span></template>
            </el-table-column>

            <!--<el-table-column prop='id' :sortable='true' label='标识' width='80'>-->
            <!--<template slot-scope='{row}'>-->
                <!--<span style='color:black'>{{row.id}}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->

            <el-table-column prop='type' :sortable='true' label='类型' width='160'>
                <template slot-scope='{row}'>
                    <span :style='row.type==10?"color:red":"color:green"'>   {{row.type==10?'节假日':'工作日' }}</span>
                </template>
            </el-table-column>

            <el-table-column prop='week' :sortable='true' label='节日名称' width='160'>
                <template slot-scope='{row}'>
                    <span style='color:black'>
                        {{row.type==10?row.name:'-'}}
                    </span>
                </template>
            </el-table-column>

            <el-table-column prop='day' :sortable='true' label='日期' width='160'>
                <template slot-scope='{row}'>
                <!--<span style='color:black'>			    {{  $dongxwDict.viewDate(row.day)+ ' '+row.week }}                 </span>-->
                    <el-button type="text" @click="edit(row)"  plain> {{  $dongxwDict.viewDate(row.day)+ ' '+row.week }}</el-button>

                </template>
            </el-table-column>

            <!--<el-table-column prop='createdAt' :sortable='true' label='创建日期' width='80'>-->
            <!--<template slot-scope='{row}'><span style='color:black'>-->
			<!--{{row.createdAt}}</span>-->
            <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop='createdBy'  label='创建人' width='100'>-->
            <template slot-scope='{row}'><span style='color:black'>
			{{row.userName}}</span>
            </template>
        </el-table-column>
        <el-table-column width='80' label='操作'  >
            <template slot-scope='scope'>
                <el-button type='text' title='编辑'@click='edit(scope.row)'>
                    <i class='el-icon-edit'></i>
                </el-button>
                <el-button type='text' @click='del(scope.row,scope.$index)' title='删除' >
                    <span style='color: red'> <i class='el-icon-delete red'></i></span>
                </el-button>
            </template>
        </el-table-column>
        </v-table>

        <v-dialog ref="formDiag" :width="'500px'" title="信息编辑">
            <form-panel @saved="onFormSaved"></form-panel>
            <div slot="footer" style="margin-right:40px">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')">保存</el-button>
                <el-button type="default" @click="()=>{$refs.formDiag.hide()}">取消</el-button>
            </div>
        </v-dialog>
    </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
    .el-input{
        width: 160px;
    }
    .status_green {
        color: red;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>

<script>
    //import CustomerSelect from '@/components/widgets/dongxw/CustomerSelect.vue';
    import PeriodSelect from '@/components/widgets/attend/PeriodSelect.vue';

    import FormPanel from './Form';

    export default {
        components: {PeriodSelect, FormPanel  },
        data() {
            return {
                dateRange : [],
                summaryMap: {},
                pageNum : 1 ,
                page: {
                    query: {
                        orderBys: 'day|desc',
                        param: {
                            isDeleted: false
                        }
                    },
                    getData : this.$api.attend.attend.DayService.query

        },
                tableActions: [
                    {
                        name: "编辑",
                        handle: this.edit
                    },
                    {
                        name: "删除",
                        handle: this.del,
                        style: "color:red"
                    }
                ]
            };
        },
        computed: {},

        methods: {
            handleCommand(command) {
                this.page.query.orderBys = command
                this.search()
            },
            calCbm(val){

                return 0;
            },
            onDataloaded(rsp) {

            },
            /*
            导出
             */
            exportRecords() {
                let params = this.getSearchParams();
                this.$api.attend.attend.DayService.export(params);
            },
            getSearchParams() {

                this.page.query.dateRanges = {};
                if (this.dateRange && this.dateRange.length > 0) {
                    this.page.query.dateRanges["holiday"] = {
                        startDate: this.dateRange[0],
                        endDate: this.dateRange.length > 1 ? this.dateRange[1] : null
                    };
                }
                return this.page.query;
            },
            /*发送邮件
           * */
            exportMail() {
                let self = this;
                this.$confirm("确定要发送产品清单的邮件吗?", "提示", {
                    type: "warning"
                }).then(() => {
                    let params = self.getSearchParams();
                    //self.$api.dongxw.ProductService.exportMail(params);

                });

            },
            create() {
                this.$refs.formDiag.show();
            },
            edit(row) {
                this.$refs.formDiag.show({id: row.id});
            },
            toggleStatus(row) {

            },
            del(row) {
                this.$confirm("确定删除此条记录吗?", "提示", {
                    type: "warning"
                }).then(() => {
                    this.$api.attend.attend.DayService.deleteById(row.id).then(rsp => {
                        this.search();
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                    });
                });
            },
            onFormSaved() {
                this.$refs.formDiag.hide();
                this.$nextTick(this.search);
            },
            init(options = {}) {
                this.search();
            },
            search() {
                if(this.page.query.param.periodId!=null) {
                    this.$api.attend.attend.PeriodService.findById(this.page.query.param.periodId).then(r => {
                        //console.log(JSON.stringify(r));
                        if(r.data!=null) {
                            this.dateRange = [
                                r.data.startDay,
                                r.data.endDay,
                            ];
                            this.$refs.table.pageNum = 1;
                            this.getSearchParams();
                            this.$refs.table.load();
                            return;
                        }

                    });
                }
                this.$refs.table.pageNum = 1;
                this.getSearchParams();
                this.$refs.table.load();
            },
            cancel() {
                this.dateRange = []
                this.page.query.param = {prdFlag: 0}
                this.search()
            }
        },
        created() {
        },
        mounted() {
            this.$on("init", this.init);
        }
    };
</script>
